/*
 * @Author: YeFei
 * @Date: 2021-11-06 16:47:47
 * @LastEditTime: 2021-11-08 14:04:40
 * @Descripttion: 
 */
export default {
  data() {
    return {
    }
  },
  props: {
    rootPath:{
      type:String,
      default:'/'
    },
    mode:{
      type:String,
      default:'inline'
    },
    theme:{
      type:String,
      default:'dark'
    },
    menuList: {
      type: Array,
      default: () => ([])
    }
  },
  created() {
  },

  methods: {
    titleClick(item) {
      console.log(this.$route.path)

    },

    handleClick(item) {
      this.$router.push({
        path:item.key
      })
    },

    getFullPath(selfPath) {
      return selfPath
    },

    //多级菜单下，key绑定错误问题
    // getSubMenu(path, subItems) {
    //   return subItems.map((childItem) => {
    //     return <a-sub-menu onTitleClick={this.titleClick} key={this.getFullPath(path)}>
    //       <span slot='title'>{childItem.meta.icon ? <a-icon type={childItem.meta.icon} /> : ''}<span>{childItem.meta.title}</span></span>
    //       {this.getMenuItem(path, subItems)}
    //     </a-sub-menu>
    //   })
    // },

    //多级路由 如果有children需要继续取
    //没有子路由
    getMenuItem(menuItems) {
      return menuItems.map((childItem) => {
        return childItem.hidden?'':<a-menu-item key={childItem.path}>
            {childItem.meta.icon ? <a-icon type={childItem.meta.icon} /> : ''}<span>{childItem.meta.title}</span>
        </a-menu-item>
      })
    },

    //接受数组
    getMenuList(menuList) {
      return menuList.map((item) => {
        return item.hidden ?'': !item.children ?
          <a-menu-item key={item.path}>
               {item.meta.icon ?  <a-icon type={item.meta.icon} /> : ''}<span>{item.meta.title}</span>
          </a-menu-item> :
          <a-sub-menu onTitleClick={this.titleClick} key={item.path}>
            <span slot='title'>{item.meta.icon ? <a-icon type={item.meta.icon} /> : ''}<span>{item.meta.title}</span></span>
            {this.getMenuItem(item.children)}
          </a-sub-menu>
      })
    }

  },

  //后续用reduce重写一下 路由菜单映射
  render() {
    function getOpenkeys(router) {
      let listKey = [];
      let getKey = (router) => {
        parent = router.parent
        if (parent && parent.path) {
          listKey.push(parent.path)
          getKey(router.parent)
        }
      }
      getKey(router)
      return listKey
    }
    //每次都更新了这个？to do
    // const { path,$route: { meta }, $store: { getters } } = this
    //当前菜单路径
    let currentPath = this.$route.fullPath
    //默认选中菜单 默认打开菜单
    let defaultKeys = [currentPath]
    let defaultOpenKeys;
    this.$route.matched.forEach((item)=>{
      if(item.path === currentPath){
        defaultOpenKeys = getOpenkeys(item);
      }
    })
    let list = this.getMenuList(this.menuList)

    return (<a-menu onClick={this.handleClick} theme={this.theme} mode={this.mode} default-open-keys={defaultOpenKeys} default-selected-keys={defaultKeys}>
      {list}
    </a-menu>)
  }
}
